<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<title>海苔君</title>
<link rel="stylesheet" href="css/detail.css" type="text/css"/>
</head>

<body>

<!--<header class="top-header">
	<a class="fr top-share-icon"></a>
	<a href="javascript:history.go(-1);" class="back-icon"></a>
	<h1>文章详情</h1>
</header>-->
<div class="fix-top">
	<div class="fl fl-block">
		<img src="images/share_logo.png" width="40" height="40" class="icon" />
		<p class="wz">
			<span class="cy">MR.HT</span>&nbsp;海苔君官方APP<br/>
			分享世间好物·发现新世界
		</p>
	</div>
	<div class="right-btn">
		<a href="http://app.haitai.tv" class="empty-btn">下载海苔君APP</a>
	</div>
</div>
<div class="detail pb60">
	<div class="d-cover">
		<img src="images/detail_09.jpg" width="100%" />
	</div>
	<div class="d-main mt10">
		<div class="userinfo fix">
			<a href="javascript:;" class="atten">关注TA</a>
			<span class="user"><img src="images/detail_15.png"  class="tx" />&nbsp;一路狂奔</span>
		</div>
		<div class="articl-top">
			<h1>这里是文章标题,如果文字多，就一直这么排下去</h1>
			<p class="time">2016-02-23 12:23:34</p>
		</div>
		<div class="articl-cont">
			<img src="images/detail_09.jpg" class="img" width="100%" />
			<div class="wz">
				文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
			</div>
			<div class="goods">
				<img src="images/detail_20.png" width="89" class="pic"/>
				<span class="comment-icon">1123</span>
				<div class="cont">
					<h3 class="tit">这里是商品的标这里是商品的标题题文字</h3>
					<p class="price">￥ 236.00元</p>
				</div>
			</div>
			<div class="goods-label">
				<img src="images/center_02.jpg" width="100%" />
				<div class="opacity-bg"></div>
				<div class="cont">
					<h3 class="ell">#标签名字#</h3>
					<div class="mt20">
						<a href="javascript:;" class="label-icon wants-icon"></a>
						<a href="javascript:;" class="label-icon had-icon"></a>
					</div>
				</div>
				<div class="label-foot">
					<a href="#" class="fr">买买买>></a>
					￥172.00
				</div>
				<img src="images/haowu_icon.png" width="27" class="label" />
			</div>
			<div class="goods-label-1">
				<div class="goods-detail">
					<img src="images/center_02.jpg" width="130" height="130" class="fl" />
					<div class="content">
						<h3 class="tit">#这里标点名称最多一排#</h3>
						<p class="comefrom"><span>京东商城</span></p>
						<p class="price">￥172.00</p>
					</div>
				</div>
				<div class="foot">
					<ul class="fix">
						<li><a href="javascript:;" class="icon wants-icon wants-icon-on">想要(<span>16</span>)</a></li>
						<li><a href="javascript:;" class="icon had-icon">已有(<span>16</span>)</a></li>
						<li class="buy buy-on"><a href="#" class="buy-btn"><span class="buy-wz">买买买</span></a> </li>
					</ul>
				</div>
			</div>
			<div class="mt10">
				<div class="mt20 tc">
					<img src="images/label_tit.png" width="246" class="inline" />
				</div>
				<div class="goods-label-2 mt10">
					<div class="left">
						<img src="images/center_02.jpg" width="130" height="130" class="db" />
						<div class="mt10 tc">
							<a href="javascript:;" class="icon wants-icon wants-icon-on"></a>
							<a href="javascript:;" class="icon had-icon had-icon-on"></a>
						</div>
					</div>
					<div class="right">
						<h3>这里是标点名称据说最多显示一排</h3>
						<p class="source"><span>京东商城</span></p>
						<p class="price">￥172.00</p>
						<a href="#" class="buy-btn">买买买</a>
					</div>
				</div>
			</div>
			<img src="images/detail_09.jpg" class="img" width="100%" />
			<img src="images/detail_09.jpg" class="img" width="100%" />
			<div class="wz">
				文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
				志排版方式。空不空行无所谓。文开始了，随便写点什么第一个字客户端
				自己解析就是了，这是某段时间特别流行的杂
			</div>
		</div>
		<ul class="three-btn fix">
			<li><a href="javascript:;" class="btn">分享给好友</a></li>
			<li><a href="javascript:;" class="btn">赞 (79)</a></li>
			<li><a href="javascript:;" class="shang-btn btn"><img src="images/detail_28.png" width="11" /> 赏 (8)</a></li>
		</ul>
	</div>
	<div class="d-box">
		<div class="bar">
			<h3 class="link-icon">本文推荐商品（3）</h3>
		</div>
		<div class="cont">
			<ul class="relative-goods fix">
				<li>
					<a href="#">
						<img src="images/index_sub_11.png" width="100%" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/index_sub_11.png" width="100%" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/index_sub_11.png" width="100%" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/index_sub_11.png" width="100%" />
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="d-box">
		<div class="bar">
			<h3 class="com-icon">最新评论（3）</h3>
		</div>
		<div class="cont">
			<ul class="com-list">
				<li>
					<div class="com-cont">
						<div class="tit">
							<a href="javascript:;" class="btn"><img src="images/detail_44.png" width="31" /></a>
							<img src="images/detail_15.png" class="tx" />
							<span>用户昵称</span>
							<span class="time">刚刚</span>
						</div>
						<div class="comment">
							<img src="images/detail_48.png" width="10" class="deco" />
							这里是用户评论的内容文字，具体字数就看用户发了多少文字来看了撒。
						</div>
					</div>
					<div class="com-cont">
						<div class="tit">
							<a href="javascript:;" class="btn"><img src="images/detail_44.png" width="31" /></a>
							<img src="images/detail_15.png" class="tx" />
							<span>用户昵称</span>
							<span class="time">刚刚</span>
						</div>
						<div class="comment">
							<img src="images/detail_48.png" width="10" class="deco" />
							这里是用户评论的内容文字，具体字数就看用户发了多少文字来看了撒。
						</div>
					</div>
				</li>
				<li>
					<div class="com-cont">
						<div class="tit">
							<a href="javascript:;" class="btn"><img src="images/detail_44.png" width="31" /></a>
							<img src="images/detail_15.png" class="tx" />
							<span>用户昵称 对 用户昵称 说</span>

						</div>
						<div class="comment">
							<img src="images/detail_48.png" width="10" class="deco" />
							这里是用户评论的内容文字，具体字数就看用户发了多少文字来看了撒。
						</div>
						<div class="mt10 fix"><span class="time fr">2015-2-5 10:12:31</span></div>
					</div>
				</li>
				<li>
					<div class="com-cont">
						<div class="tit">
							<a href="javascript:;" class="btn"><img src="images/detail_44.png"  width="31" /></a>
							<img src="images/detail_15.png" class="tx" />
							<span>用户昵称</span>
							<span class="time">刚刚</span>
						</div>
						<div class="comment">
							<img src="images/detail_48.png" width="10" class="deco" />
							<div class="money">
								打赏了一个红包
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="com-cont">
						<div class="tit">
							<a href="javascript:;" class="btn"><img src="images/detail_44.png"  width="31" /></a>
							<img src="images/detail_15.png" class="tx" />
							<span>用户昵称</span>
							<span class="time">刚刚</span>
						</div>
						<div class="comment">
							<img src="images/detail_48.png" width="10" class="deco" />
							<div class="agree">
								赞了这篇文章
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="bottom-btn pt10 tc">
				<div class="mt10">
					<a href="comment.html" class="border-btn com-icon">更多评论</a>
				</div>
				<div class="mt10">
					<a href="#" class="border-btn write-icon">我要评论</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="fix-comment">
	<div class="cont">
		<a href="javascript:;" class="yellow-btn">确定</a>
		<div class="input">
			<input type="text" class="write-input" placeholder="燕过留痕，人过留名" />
		</div>
		<img src="images/write_icon_03.png" width="10" class="input-desc" />
	</div>
</div>
<script src="js/sea.js"></script>
<script>
	seajs.config({
		alias:{
			'jquery':'lib/jquery.js',
			'zepto':'lib/zepto.js'
		},
		paths:{
			'basePath':'js/'
		},
		debug:true
	})
	seajs.use("src/index");
</script>
</body>
</html>
